<template>
  <div class="home">
    <h1>首页</h1>
    <router-link to="/home/detail/1">第一条新闻</router-link> |
    <router-link to="/home/detail/2">第二条新闻</router-link> |
    <router-link to="/home/detail/3">第三条新闻</router-link> |
    <button @click="view(1)">第一条新闻</button> |
    <button @click="view2(1)">第二条新闻</button> |
    <router-view/>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'HomeView',
  components: {},
  methods: {
    view(id){
      this.$router.push('/home/detail/'+id)
      // this.$router.push({name:'detail',params:{id:1}})
    },
    view2(id){
      // this.$router.push({path:'/home/detail2',query:{id:id}})
      this.$router.push({name:'detail2',query:{id:id}})
    }
  }
}
</script>

<style>
.home{
  width: 400px;
  border: 1px solid #000;
  margin: 20px auto;
}
</style>
